【CSS】clear - 要素の回り込みの解除

CSSのclearプロパティについて解説します。

検証環境

CSS

macOS

14.1

clear

clearは“要素の回り込みの解除”のプロパティです。

基本構文

clear: 値;

値

代表的な値は次の通りです。

値	意味
none	なし。
left	左側に回り込みを解除。
right	右側に回り込みを解除。
both	左右の回り込みを解除。

サンプル

none

sample.html

<style>
.img1 {
    float: left;
    width: 200px;
}
.img2 {
    float: right;
    width: 200px;
}
.sample {
    ___ih_hl_start
    clear: none;
    ___ih_hl_end
}
</style>

<div>
    <img class="img1" src="https://it-hack.net/storage/app/media/document/development/programming/css/properties/float/hacker-commandline.jpeg">
    <img class="img2" src="https://it-hack.net/storage/app/media/document/development/programming/css/properties/float/hacker-commandline.jpeg">
    <p class="sample">CSS : Cascading Style Sheets.</p>
    <p>CSS is a programming language that decorates elements such as HTML and XML.</p>
    <p>You can set various properties such as text color, background, and size.</p>
</div>

プレビュー

left

sample.html

<style>
.img1 {
    float: left;
    width: 100px;
}
.img2 {
    float: right;
    width: 200px;
}
.sample {
    ___ih_hl_start
    clear: left;
    ___ih_hl_end
}
</style>

<div>
    <img class="img1" src="https://it-hack.net/storage/app/media/document/development/programming/css/properties/float/hacker-commandline.jpeg">
    <img class="img2" src="https://it-hack.net/storage/app/media/document/development/programming/css/properties/float/hacker-commandline.jpeg">
    <p class="sample">CSS : Cascading Style Sheets.</p>
    <p>CSS is a programming language that decorates elements such as HTML and XML.</p>
    <p>You can set various properties such as text color, background, and size.</p>
</div>

プレビュー

right

sample.html

<style>
.img1 {
    float: left;
    width: 200px;
}
.img2 {
    float: right;
    width: 100px;
}
.sample {
    ___ih_hl_start
    clear: right;
    ___ih_hl_end
}
</style>

<div>
    <img class="img1" src="https://it-hack.net/storage/app/media/document/development/programming/css/properties/float/hacker-commandline.jpeg">
    <img class="img2" src="https://it-hack.net/storage/app/media/document/development/programming/css/properties/float/hacker-commandline.jpeg">
    <p class="sample">CSS : Cascading Style Sheets.</p>
    <p>CSS is a programming language that decorates elements such as HTML and XML.</p>
    <p>You can set various properties such as text color, background, and size.</p>
</div>

プレビュー

both

sample.html

<style>
.img1 {
    float: left;
    width: 100px;
}
.img2 {
    float: right;
    width: 200px;
}
.sample {
    ___ih_hl_start
    clear: both;
    ___ih_hl_end
}
</style>

<div>
    <img class="img1" src="https://it-hack.net/storage/app/media/document/development/programming/css/properties/float/hacker-commandline.jpeg">
    <img class="img2" src="https://it-hack.net/storage/app/media/document/development/programming/css/properties/float/hacker-commandline.jpeg">
    <p class="sample">CSS : Cascading Style Sheets.</p>
    <p>CSS is a programming language that decorates elements such as HTML and XML.</p>
    <p>You can set various properties such as text color, background, and size.</p>
</div>

プレビュー